<template>
	<view class="">
		<view class="order_tit">
			<scroll-view scroll-x="true" class="scroll">
				<text @click="getOrderList(status=0)" :class="status==0?'act':''">全部</text><!-- getOrderList -->
				<text @click="getOrderList(status=1)" :class="status==1?'act':''">待付款</text><!-- obligation -->
				<text @click="getOrderList(status=2)" :class="status==2?'act':''">待发货</text><!-- tobeshipped -->
				<text @click="getOrderList(status=3)" :class="status==3?'act':''">待收货</text>
				<text @click="getOrderList(status=6)||getOrderList(status=7)" :class="status==6||status==7?'act':''">已完成</text>
				<!-- <text :class="[(params.status == 5||params.status == 4)?'act':'']" data-index="5">售后</text> -->
			</scroll-view>
		</view>
		<view class="o_none" v-if="orderlist==''">
			暂无更多
		</view>
		<view class="order_box" v-for="item in orderlist" :key="item._id">
			<view class="order_list">
				<view class="order_top">
					<text class="order_pa">订单号：{{ item.order_sn }}</text>
					<text class="order_pb" v-if="item.status==1">待付款</text>
					<text class="order_pb" v-else-if="item.status==2">待发货</text>
					<text class="order_pb" v-else-if="item.status==3">待收货</text>
					<text class="order_pb" v-else-if="item.status== 6 || item.status == 7">已完成</text>
					<!-- 取消原因 -->
					<text class="order_pb" v-else="item.status==8">{{order_text}}</text>
				</view>
				<view class="order_center" v-for="ite in item.goods" @click="orderdetail(item._id,item.status,item.cancel_text)">
					<image :src="ite.img"></image>
					<view class="order_good">
						<view class="order_pc">{{ ite.name }}</view>
						<view class="order_pd">{{ ite.attr }}</view>
						<view class="order_pe">
							<text class="price">¥{{ ite.price }}</text>
							<text>x{{ ite.num }}</text>
						</view>
					</view>
				</view>
				<view class="order_fee">
					<!-- <text class="order_pf">14:00</text> -->
					<text class="order_pg">
						共 {{ item.goods.length }}件商品 实付款
						<text style="color: #FDD100;font-size: 34rpx;margin-left: 5px;">¥{{ item.base_money }}</text>
					</text>
				</view>

				<template>
					<view class="order_bottom">
						<text data-type="detail" @click="orderdetail(item._id,item.status,item.cancel_text)">查看详情</text>
						
						<!-- 待付款 -->
						<text data-type="pay" class="act" v-if="item.status==1" @click="go_pay(item._id,item.base_money)">去付款</text>
						
						<!-- 待发货 待收货 -->
						<text data-type="shouhuo" class="act" v-else-if="item.status==2 || item.status==3" @click="shouhuo(item._id)">确认收货</text>
						<!-- 已取消 -->
						<text data-type="del" class="act" @click="del_order(item._id)" v-else-if="item.status==8">删除订单</text>
						
						<!-- 已完成 -->
						<text data-type="detail" class="act" v-else-if="item.status== 6 || item.status == 7">去评价</text>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			orderlist: [], //订单列表
			token: '',
			status:'',
			order_text:'',//订单状态 显示文字
			cancel_text: '', //取消原因
			orderlist_id:'',//订单id
			detaillist:'',//订单详情
			host: 'https://4de16698-d9f4-443a-b416-ef1037cce952.bspapp.com/http'
		};
	},
	onLoad(options) {
		this.status=options.status
		console.log(this.status);
	},
	onShow() {
		this.getOrderList()
	},
	methods: {
		// 订单列表 全部
		getOrderList(status) {
			let ucount=''//总订单数
			let token = uni.getStorageSync('token');
			this.token = token;
			let uid = uni.getStorageSync('uid');
			this.uid = uid;
			if(status!==undefined){
				this.status=status
			}
			uni.request({
				method: 'POST',
				header: {
					'token': this.token
				},
				data: {
					uid: this.uid,
					status:this.status, //订单状态 0全部 1待付款 2待发货 3待收货 6或者7已完成 8未支付,系统自动取消
					skip: 0, //分页开始数
					limit: ucount //一次给几条
				},
				url: this.host + '/order/getOrderList',
				success: res => {
					console.log(res);
					ucount = res.data.count; //订单数量
					this.orderlist = res.data.data; //订单列表
					
					this.orderlist = this.orderlist.map((v)=>{
						return{//v当前元素的值
							...v,//当前元素的所有的值
							order_text:this.order_text//订单状态
						}
					})//map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值
					
					for(let i=0;i<this.orderlist.length;i++){
						if (this.orderlist[i].status == 8) {
							this.order_text='已取消'//订单状态
							this.orderlist[i].order_text=this.order_text  ; //订单状态
							this.cancel_text = this.orderlist[i].cancel_text; //取消原因
							this.orderlist_id = this.orderlist[i]._id;
						}
					}
				},
				fail: () => {
					console.log('请求失败');
				}
			});
		},
		// 删除订单
		del_order(o_id){
			let token = uni.getStorageSync('token');
			this.token = token;
			// console.log(o_id);
			uni.request({
				method: 'POST',
				header: {
					'token': this.token
				},
				data: {
					orderId: o_id
				},
				url: this.host + '/order/del_order',
				success: res => {
					console.log(res);
					this.getOrderList();
					uni.$u.toast('删除成功')
					this.$forceUpdate()//强制更新
				},
				fail: () => {
					console.log('请求失败');
				}
			});
		},
		// 订单详情
		orderdetail(d_id,status,cancel_text){
			if(status==1){
				this.order_text='待付款'
			}else if(status==2){
				this.order_text='待发货'
			}else if(status==3){
				this.order_text='待收货'
			}else if(status== 6 || status == 7){
				this.order_text='已完成'
			}else if(status==8){
				this.order_text='已取消'
			}
			
			uni.navigateTo({
				// order_text订单状态
				// cancel_text取消原因
				url:`/pages/order/order_detail?order_id=${d_id}&order_text=${this.order_text}&cancel_text=${cancel_text}`
			})
		},
		// 去付款
		go_pay(pay_id,base_money){
			console.log(base_money);
			uni.navigateTo({
				url:`/pages/money/pay?order_id=${pay_id}&money=${base_money}`
			})
		},
		// 确认收货
		shouhuo(o_id){
			console.log(o_id);
			// uni.request({
			// 	method: 'POST',
			// 	data: {
			// 		orderId: o_id
			// 	},
			// 	url: this.host + '/order/shouhuo',
			// 	success: res => {
			// 		console.log(res);
			// 		this.getOrderList();
			// 	},
			// 	fail: () => {
			// 		console.log('请求失败');
			// 	}
			// });
		}
	}
};
</script>

<style lang="scss">
.o_none{
	padding-top: 30%;
	text-align: center;
	color: #999999;
}
input::-webkit-input-placeholder {
	color: #ccc;
}

input::-moz-input-placeholder {
	color: #ccc;
}

input::-ms-input-placeholder {
	color: #ccc;
}

// .uni-load-more{

// 	margin-top: 100upx;
// }
.order_ipt {
	width: 580upx;
	height: 30px;
	border: 1px #eee solid;
	border-radius: 20px;
	font-size: 30upx;
	line-height: 30px;
	color: #666;
	padding: 0 10px;
	margin: 7.5px 0;
	text-align: center;
}
.order_box:first-child{
	
}
.order_box {
	width: 100%;
	height: auto;
	overflow: hidden;
	// padding-top: 100rpx;
	padding: 100rpx 30rpx 20rpx;
	margin-bottom:-120rpx;
	
	.order_list {
		width: 100%;
		height: auto;
		overflow: hidden;
		background: white;
		border-radius: 16upx;
		margin-top: 30upx;
		padding: 20upx;

		.order_top {
			width: 100%;
			height: auto;
			overflow: hidden;

			image {
				display: block;
				width: 40upx;
				height: 38upx;
				float: left;
				border-radius: 6rpx;
			}

			.order_pa {
				font-size: 28upx;
				color: #333;
				line-height: 38upx;
				float: left;
				margin-left: 16upx;
			}

			.order_pb {
				font-size: 24upx;
				line-height: 38upx;
				color: $color1;
				float: right;
			}
		}

		.order_center {
			width: 100%;
			height: auto;
			overflow: hidden;
			margin-top: 24upx;

			image {
				display: block;
				width: 200upx;
				height: 200upx;
				float: left;
			}

			.order_good {
				width: calc(100% - 200upx);
				height: 200rpx;
				padding-left: 20upx;
				overflow: hidden;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.order_pc {
					font-size: 24upx;
					color: #000000;
					height: 76upx;
					width: 100%;
					line-height: 36upx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}

				.order_pd {
					font-size: 24upx;
					color: #999999;
					margin-top: 16upx;
					display: block;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.order_pe {
					font-size: 32upx;
					color: $color1;
					font-weight: bold;
					display: flex;
					width: 100%;
					justify-content: space-between;
					align-items: center;

					text {
						color: #999999;
						font-size: 24upx;
						font-weight: normal;
					}
					.price {
						color: $color1;
					}
				}
			}
		}

		.order_fee {
			width: 100%;
			height: 50rpx;
			overflow: hidden;
			line-height: 50rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			margin-top: 8px;

			.order_pf {
				font-size: 24upx;
				display: block;
				float: left;
				line-height: 29upx;
				color: #999999;
			}

			.order_pg {
				font-size: 24upx;
				display: block;
				float: right;
				line-height: 29upx;
				color: #999999;
			}
		}

		.order_bottom {
			width: auto;
			height: auto;
			float: right;
			margin-top: 16upx;
			overflow: hidden;

			text {
				display: inline-block;
				min-width: 130upx;
				height: 48upx;
				background: rgba(255, 255, 255, 1);
				border: 1px solid rgba(191, 191, 191, 1);
				opacity: 1;
				border-radius: 30upx;
				font-size: 24upx;
				text-align: center;
				padding: 0 17upx;
				line-height: 48upx;
				margin-left: 24upx;
			}

			.act {
				color: white;
				background: $color1;
				border: 1px solid $color1;
			}
		}
	}
}

.icon-sousuo11 {
	font-size: 40upx;
	color: #999999;
}

.icon-fanhui11 {
	font-size: 32upx;
}

.order_tit {
	width: 100%;
	height: 87upx;
	position: fixed;
	left: 0;
	z-index: 22;
	background: white;

	.scroll {
		height: 87upx;

		text {
			display: block;
			width: 20%;
			height: auto;
			line-height: 87upx;
			float: left;
			text-align: center;
			font-size: 28upx;
			position: relative;
			color: #999999;
		}

		.act {
			color: $color1;

			&:before {
				content: '';
				width: 64upx;
				height: 8upx;
				background: $color1;
				border-radius: 80upx;
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		}
	}
}
</style>
